<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/login.css?v={{ layui.admin.v }}-1" media="all">
</script>

<div class="login-container layui-hide">
    <div class="left-container" id="leftContainer">
        <img src="/images/login/mch-login-img.svg" alt="" />
    </div>
    <div class="logo-pallet">
        <div class="logo-img-box" id="siteLogo"></div>
    </div>
    <div class="right-container">
        <div class="top-nav">
            <a class="top-nav-link" href="" id="mchSiteUrl">
                <div class="web-link" data-i18n="login.home">官网首页</div>
                <img src="/images/login/arrow1CB7A2.svg" alt="" class="link-arrow" />
            </a>
            <!-- 语言切换按钮 -->
            <div class="language-switcher">
                <div class="lang-dropdown">
                    <button class="lang-btn" id="currentLang">
                        <span class="lang-text">中文</span>
                        <svg class="lang-arrow" width="12" height="8" viewBox="0 0 12 8" fill="none">
                            <path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                    <div class="lang-menu" id="langMenu">
                        <div class="lang-option" data-lang="zh_CN">
                            <span class="lang-flag">🇨🇳</span>
                            <span class="lang-name">中文</span>
                        </div>
                        <div class="lang-option" data-lang="en_US">
                            <span class="lang-flag">🇺🇸</span>
                            <span class="lang-name">English</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="input-pallet-box">
            <div class="input-title-box">
                <div class="title-icon-box">
                    <img src="/images/login/mach-login-icon.svg" alt="" />
                </div>
                <div class="title-text-box">
                    <div class="title-text-cn" data-i18n="login.title.merchant">商户系统登录</div>
                    <div class="title-text-en" data-i18n="login.subtitle.merchant">Login to the merchant system</div>
                </div>
            </div>

            <form class="layui-form" style="max-width: 100%;">
                <input name="vercodeRandomStr" id="vercodeRandomStr" type='hidden'>
                <div class="input-box">
                    <div class="input-tips" data-i18n="login.username">用户名</div>
                    <div class="input-con-box">
                        <img src="/images/login/user-icon.svg" alt="" class="input-icon" />
                        <input type="text" name="username" lay-verify="required" class="input-pallet" data-i18n-placeholder="login.username.placeholder" placeholder="请输入用户名" />
                    </div>
                </div>

                <div class="input-box">
                    <div class="input-tips" data-i18n="login.password">密码</div>
                    <div class="input-con-box">
                        <img
                                src="/images/login/password-icon.svg"
                                alt=""
                                class="input-icon"
                        />
                        <input type="password" name="password" lay-verify="required" class="input-pallet" data-i18n-placeholder="login.password.placeholder" placeholder="请输入密码" />
                    </div>
                </div>

                <div class="input-box">
                    <div class="input-tips" data-i18n="login.captcha">图形验证码</div>
                    <div class="input-con-box captcha-box">
                        <img
                                src="/images/login/captcha-icon.svg"
                                alt=""
                                class="input-icon"
                        />
                        <input type="text" name="vercode" lay-verify="required" class="input-pallet captcha-input" data-i18n-placeholder="login.captcha.placeholder" placeholder="请输入验证码" />
                        <div class="captcha-img">
                            <img src="" id="LAY-user-get-vercode" alt="" />
                        </div>
                    </div>
                </div>

                <div class="input-box">
                    <div class="input-tips" data-i18n="login.google.code">谷歌验证码（若没有可以不填）</div>
                    <div class="input-con-box">
                        <img src="/images/login/google-icon.svg" alt="" class="input-icon" />
                        <input type="text" name="googleCode" class="input-pallet" data-i18n-placeholder="login.google.code.placeholder" placeholder="请输入谷歌验证码" />
                    </div>
                </div>

                <div class="input-box flex-box button-box">
                    <div class="login-button" id="loginBtn" lay-submit lay-filter="LAY-user-login-submit" onclick="return false;">
                        <div class="login-but-text" data-i18n="login.submit">登录</div>
                        <div class="login-but-img">
                            <img src="/images/login/arrowFFF.svg" alt="" />
                        </div>
                    </div>
                    <a class="sign-button" href="/start/index.html#/user/reg" data-i18n="login.register">没有账号？去注册</a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 语言切换样式 -->
<style>
.language-switcher {
    position: relative;
    margin-left: 20px;
}

.lang-dropdown {
    position: relative;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.lang-arrow {
    transition: transform 0.3s ease;
}

.lang-dropdown.active .lang-arrow {
    transform: rotate(180deg);
}

.lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.lang-dropdown.active .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #333;
    font-size: 14px;
}

.lang-option:hover {
    background-color: #f5f7fa;
}

.lang-flag {
    font-size: 16px;
}

.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>

<script src='/src/lib/core.js'></script>
<script src='/src/lib/Crypto-js.js'></script>
<script src='/static/i18n/i18n.js'></script>
<script src='/static/i18n/zh_CN.js'></script>
<script src='/static/i18n/en_US.js'></script>
<script>
    layui.use(['admin', 'form', 'user'], function(){
        var $ = layui.$
            ,setter = layui.setter
            ,admin = layui.admin
            ,form = layui.form
            ,router = layui.router()
            ,search = router.search
            ,layer = layui.layer;

        var loadIndex = layer.load(1);

        //变更网站信息
        var siteInfo = layui.data(layui.setter.tableName).siteInfo;
        $("#mchSiteUrl").attr("href", siteInfo.mchSiteUrl);
        $("#siteLogo").append('<img src="'+siteInfo.siteLogo+'" style="height: 30px;" alt="'+siteInfo.siteTitle+'">');

        $.loginOk = function(res) {
            //请求成功后，写入 access_token
            layui.data(setter.tableName, {
                key: setter.request.tokenName
                ,value: res.data.access_token
            });

            //登入成功的提示与跳转
            layer.msg('登入成功', {
                offset: '15px'
                ,icon: 1
                ,time: 1000
            }, function(){
                location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/';
            });
        };

        $('.input-pallet').bind('keyup', function(event) {
            if (event.keyCode == "13") { //keyCode=13是回车键
                $("#loginBtn").trigger("click");
            }
        });

        //提交
        form.on('submit(LAY-user-login-submit)', function(obj){

            //请求登入接口
            admin.encryptReq({
                type: 'get'
                ,url: layui.setter.baseUrl + '/auth' //实际使用请改成服务端真实接口
                ,data: obj.field
                ,error: function(err){ layer.alert(JSON.stringify(err.field), { title: '错误提示' }) }
                ,success: function (res) {
                    $.loginOk(res);
                }
            });
        });

        $.randomString = function (len) {
            len = len || 32;
            var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
            var maxPos = $chars.length;
            var pwd = '';
            for (i = 0; i < len; i++) {
                pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        };

        $('body').off('click', "#LAY-user-get-vercode").on('click', "#LAY-user-get-vercode", function(){
            var vercodeRandomStr = $.randomString(6) + new Date().getTime();
            $("#vercodeRandomStr").val(vercodeRandomStr);
            $("#LAY-user-get-vercode").attr('src', layui.setter.baseUrl + '/auth/vercode?vercodeRandomStr=' + vercodeRandomStr);
        });

        $("#LAY-user-get-vercode").click();

        //监听加载状态改变
        $(document).ready(function(){
            layer.close(loadIndex);
            $(".login-container").removeClass("layui-hide");
        });

        // 初始化语言切换功能
        initLanguageSwitcher();

    });

    // 语言切换功能
    function initLanguageSwitcher() {
        var currentLang = localStorage.getItem('xxpay_merchant_locale') || 'zh_CN';
        var langBtn = document.getElementById('currentLang');
        var langMenu = document.getElementById('langMenu');
        var langDropdown = langBtn.parentElement;

        // 语言映射
        var langMap = {
            'zh_CN': { name: '中文', flag: '🇨🇳' },
            'en_US': { name: 'English', flag: '🇺🇸' }
        };

        // 更新当前语言显示
        function updateCurrentLang(lang) {
            var langInfo = langMap[lang];
            langBtn.querySelector('.lang-text').textContent = langInfo.name;
            currentLang = lang;
        }

        // 初始化当前语言
        updateCurrentLang(currentLang);
        updatePageTexts(currentLang);

        // 点击语言按钮
        langBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            langDropdown.classList.toggle('active');
        });

        // 点击语言选项
        var langOptions = document.querySelectorAll('.lang-option');
        langOptions.forEach(function(option) {
            option.addEventListener('click', function() {
                var selectedLang = this.getAttribute('data-lang');
                if (selectedLang !== currentLang) {
                    switchLanguage(selectedLang);
                    updateCurrentLang(selectedLang);
                }
                langDropdown.classList.remove('active');
            });
        });

        // 点击其他地方关闭菜单
        document.addEventListener('click', function() {
            langDropdown.classList.remove('active');
        });
    }

    // 切换语言
    function switchLanguage(lang) {
        // 保存语言偏好
        localStorage.setItem('xxpay_merchant_locale', lang);

        // 调用后端API
        fetch('/api/i18n/switch', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'lang=' + encodeURIComponent(lang)
        }).then(function(response) {
            return response.json();
        }).then(function(data) {
            if (data.code === 0) {
                // 更新页面文本
                updatePageTexts(lang);
            }
        }).catch(function(error) {
            console.error('Language switch failed:', error);
            // 即使API失败也更新页面文本
            updatePageTexts(lang);
        });
    }

    // 更新页面文本
    function updatePageTexts(lang) {
        var messages = getMessages(lang);

        // 更新所有带有data-i18n属性的元素
        var elements = document.querySelectorAll('[data-i18n]');
        elements.forEach(function(element) {
            var key = element.getAttribute('data-i18n');
            var text = messages[key] || key;
            element.textContent = text;
        });

        // 更新placeholder
        var placeholderElements = document.querySelectorAll('[data-i18n-placeholder]');
        placeholderElements.forEach(function(element) {
            var key = element.getAttribute('data-i18n-placeholder');
            var text = messages[key] || key;
            element.placeholder = text;
        });
    }

    // 获取语言包
    function getMessages(lang) {
        var messages = {
            'zh_CN': {
                'login.home': '官网首页',
                'login.title.merchant': '商户系统登录',
                'login.subtitle.merchant': 'Login to the merchant system',
                'login.username': '用户名',
                'login.username.placeholder': '请输入用户名',
                'login.password': '密码',
                'login.password.placeholder': '请输入密码',
                'login.captcha': '图形验证码',
                'login.captcha.placeholder': '请输入验证码',
                'login.google.code': '谷歌验证码（若没有可以不填）',
                'login.google.code.placeholder': '请输入谷歌验证码',
                'login.submit': '登录',
                'login.register': '没有账号？去注册'
            },
            'en_US': {
                'login.home': 'Official Website',
                'login.title.merchant': 'Merchant System Login',
                'login.subtitle.merchant': 'Login to the merchant system',
                'login.username': 'Username',
                'login.username.placeholder': 'Please enter username',
                'login.password': 'Password',
                'login.password.placeholder': 'Please enter password',
                'login.captcha': 'Captcha',
                'login.captcha.placeholder': 'Please enter captcha',
                'login.google.code': 'Google Code (Optional)',
                'login.google.code.placeholder': 'Please enter Google code',
                'login.submit': 'Login',
                'login.register': 'No account? Register now'
            }
        };

        return messages[lang] || messages['zh_CN'];
    }
</script>

